@charset "utf-8";
@import "reset";
@function r($p){
    @return $p/40*1rem;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body{
    width: 100%;
    height: 100%;
}
html{
    font-size: 40px;
}
body{
    font-size:16px
}
.WebPage{
    width: r(640);
    height: 100%;
    position: relative;
}
.WebHead{
    width: r(640);
    height: r(128);
    border-bottom: r(1) solid #ab9e9e;
    font-size: 14px;
    >div:nth-of-type(1){
        height: r(78);
        display: flex;
        width: r(640);
        justify-content: center;
        align-items: center;
        >i{
            font-size: 20px;
            margin-right: r(20);
        }
        >input{
            box-sizing: border-box;
            width: r(520);
            height: r(50);
            border-radius: 10px;
            padding-left:r(30) ;
            padding-right:r(30) ;
            background: #f2f2f2;
            border: 0px;
            text-align: center;
        }
    }
    >div:nth-of-type(2){
        width: r(640);
        height: r(50);
        >ul:nth-of-type(1){
            display: flex;
            width: r(640);
            >li{
                width: r(160);
                line-height: r(48);
                text-align: center;
            }
        }
        >ul:nth-of-type(2){
            display: flex;
            width: r(640);
            >li{
                width: r(160);
                height: r(2);
                line-height: r(2);
                text-align: center;
            }
            >li:nth-of-type(2){
                background: black;
            }
        }
    }
}
.WebContent{
    width: r(640);
}
.WebContent-Title{
    position: relative;
    width: r(640);
    display: flex;
    box-sizing: border-box;
    padding:r(14);
    >div:nth-of-type(1){
        width:r(58);
        height: r(58);
        >img{
            width:r(58);
            height: r(58);
        }
    }
    >div:nth-of-type(2){
        height: r(58);
        margin-left: r(12);
        >div:nth-of-type(1){
            display: flex;
            margin-top: r(3);
            font-size: 14px;
            align-items: baseline;
            >div{
                font-size: 12px;
                height: r(23);
                width: r(50);
                border: r(1) solid #e5e5e5;
                border-radius: 8px;
                text-align: center;
                margin: 0 r(8);
                font-size: 12px;
                color:#9d9d9d ;
                line-height: r(23);
            }
        }
        >div:nth-of-type(2){
            >i{
                color:#9d9d9d  ;
                font-size: 12px;
            }
        }
    }
    >i{
        position: absolute;
        font-size: 20px;
        right: r(28);
        top:r(33);
    }
}
.WebContent-Content{
    width: r(640);
    display: flex;
    >div:nth-of-type(1){
        width: r(213);
        >img{
            width: r(213);
        }
    }
    >div:nth-of-type(2){
        width: r(212);
        >img{
            width: r(212);
        }
    }
    >div:nth-of-type(3){
        width: r(211);
        >img{
            width: r(211);
        }
    }
}
